<template>
  <vx-card title="资源详情" full>
    <vs-input
      label="资源名称"
      class="inputx red"
      v-model="parentData.name"
      name="资源名称"
      ref="hasValidateName"
      data-vv-validate-on="input"
      v-validate="'required'"
    />
    <span
      v-show="parentData.parentId && errorBags.has('资源名称')"
      class="text-danger text-sm"
    >{{ errorBags.first('资源名称')}}</span>
    <vs-input
      label="资源码"
      name="资源码"
      data-vv-validate-on="input"
      ref="hasValidateCode"
      class="inputx red"
      v-model="parentData.permissionCode"
      v-validate="'required'"
    />
    <span
      v-show="parentData.parentId && errorBags.has('资源码')"
      class="text-danger text-sm"
    >{{ errorBags.first('资源码')}}</span>
    <vs-select
      v-if="parentData.type"
      autocomplete
      class="inputx"
      v-model="parentData.type"
      label="类型"
      @change="getSelectResourceType"
    >
      <vs-select-item
        :key="selectIndex"
        :value="selectItem.value"
        :text="selectItem.name"
        v-for="(selectItem,selectIndex) in resourceType"
      />
    </vs-select>
    <vs-select
      v-else
      autocomplete
      class="inputx"
      v-model="selfDataType"
      label="类型"
      @change="getSelectResourceType"
    >
      <vs-select-item
        :key="selectIndex"
        :value="selectItem.value"
        :text="selectItem.name"
        v-for="(selectItem,selectIndex) in resourceType"
      />
    </vs-select>
    <vs-input
      v-if="(selfDataType!=1  && !isClick) ||  (parentData.type!=1 && isClick )"
      label="url"
      class="inputx"
      v-model="parentData.url"
    />
    <!-- <vs-input
      v-else
      label="url"
      class="inputx"
      v-model="parentData.url"
    /> -->
    <vs-select v-if="(selfDataType ==3 && !isClick) || (parentData.type == 3  && isClick) " autocomplete class="inputx" v-model="parentData.method" label="请求方式">
      <vs-select-item
        :key="index"
        :value="item.name"
        :text="item.name"
        v-for="(item,index) in methodOptions"
      />
    </vs-select>

    <vs-input label="备注" class="inputx" v-model="parentData.remark" />
    <vs-checkbox v-if="parentIsadd" class="mt-5" v-model="parentData.status" disabled>启用</vs-checkbox>
    <vs-checkbox v-else class="mt-5" v-model="parentData.status" @change="isEnabled">启用</vs-checkbox>
    <div class="resourceBtn mb-5" v-if="parentIsadd">
      <vs-button v-if="errorBags.any()" size="small" disabled>新增</vs-button>
      <vs-button v-else color="primary" size="small" @click="addResourceInfo">新增</vs-button>
    </div>
    <div v-if="parentIsClickTree" class="resourceBtn mb-3">
      <vs-button
        size="small"
        icon="icon-edit"
        icon-pack="feather"
        disabled
        v-if="errorBags.any()"
      >修改</vs-button>
      <vs-button
        v-else
        color="primary"
        size="small"
        icon="icon-edit"
        icon-pack="feather"
        @click="editResourceInfo"
      >修改</vs-button>
      <vs-button
        size="small"
        icon="icon-delete"
        icon-pack="feather"
        class="ml-2"
        disabled
        v-if="errorBags.any()"
      >删除</vs-button>
      <vs-button
        v-else
        color="primary"
        size="small"
        @click="popupActivoDel = true"
        icon="icon-delete"
        icon-pack="feather"
        class="ml-2"
      >删除</vs-button>
    </div>

    <!--删除模态框开始 -->
    <vx-popup
      classContent="popup-example"
      title="删除"
      :active.sync="popupActivoDel"
      @confirmPopup="confirmDel"
      @cancelPopup="popupActivoDel = false"
    >
      <span>确定删除此资源吗？</span>
    </vx-popup>
    <!-- 删除模态框结束 -->
  </vx-card>
</template>

<script>
import VuePerfectScrollbar from "vue-perfect-scrollbar";
export default {
  props: ["parentData", "parentType", "parentIsadd", "parentIsClickTree"],
  data() {
    return {
      isClick:false,
      methodOptions: [
        { name: "GET", value: 1 },
        { name: "POST", value: 2 },
        { name: "PUT", value: 3 },
        { name: "DELETE", value: 4 }
      ],
      isInnit: true,
      selfDataType: "1",
      popupActivoDel: false,
      labelPosition: "left",
      resourceType: [
        { value: 1, name: "菜单" },
        { value: 2, name: "页面" },
        { value: 3, name: "功能/按钮" },
        { value: 4, name: "其他" }
      ]
    };
  },
  methods: {
    getSelectResourceType() {},
    //是否启用
    isEnabled() {},
    //新增-资源详情
    addResourceInfo() {
      let params = this.parentData;
      // console.log(params, "]]]]]////");
      params.type = params.type ? params.type : this.selfDataType;
      if ((params.type == 1 && this.parentType == 1 && params.parentId != 0) ) {
        this.$vs.notify({
          text: "菜单目录下不可添加菜单",
          color: "danger"
        });
        return;
      }

      this.$api.accessControl
        .resourceInfoAdd(params)
        .then(res => {
          // debugger
          if (res.data.success) {
            this.$emit("reloadTree");
            this.$vs.notify({
              text: "保存成功",
              color: "success"
            });
          } else {
            this.$vs.notify({
              text: "保存失败",
              color: "danger"
            });
          }
        })
        .catch(() => {});
    },
    //修改-资源详情
    editResourceInfo() {
      let params = this.parentData;
      console.log(params, this.selfDataType);
      params.type = params.type ? params.type : this.selfDataType;
      params.status ? (params.status = 1) : (params.status = 0);
      if (params.type == 1 && this.parentType == 2 && params.parentId != 0) {
        this.$vs.notify({
          text: "菜单目录下不可添加菜单",
          color: "danger"
        });
        return;
      }
      // debugger
      this.$api.accessControl
        .resourceInfoEdit(params)
        .then(res => {
          if (res.data.success) {
            this.$emit("reloadTree");
            this.$vs.notify({
              text: "保存成功",
              color: "success"
            });
          } else {
            this.$vs.notify({
              text: "保存失败",
              color: "danger"
            });
          }
        })
        .catch(() => {});
    },
    //删除资源详情
    confirmDel() {
      this.$api.accessControl
        .resourceInfoDel(this.parentData.resourceId)
        .then(res => {
          this.popupActivoDel = false;
          if (res.data.success) {
            this.$emit("reloadTree");
            this.$vs.notify({
              text: "删除成功",
              color: "danger"
            });
          } else {
            this.$vs.notify({
              text: "删除失败",
              color: "danger"
            });
          }
        })
        .catch(() => {});
    }
  },
  components: {
    VuePerfectScrollbar
  },
  watch: {
    parentIsadd() {
      this.$refs.hasValidateName.listeners.blur();
      this.$refs.hasValidateCode.listeners.blur();
    },
    parentIsClickTree(a,b) {
      this.$refs.hasValidateName.listeners.blur();
      this.$refs.hasValidateCode.listeners.blur();
      // if(parentIsClickTree)
      if(a)
      this.isClick = true
      if(b)
      this.isClick = false
      // console.log(this.isClick)
    },
    parentData:{
       immediate: true,
       handler(a,b){
         console.log(a)
       }

    }
  }
};
</script>
<style lang="scss" scoped>
.vs-input,
.con-select {
  width: 80%;
  margin-top: 1rem;
}
.resourceBtn {
  display: flex;
  justify-content: flex-end;
}
/deep/.vs-input--input.normal {
  font-size: 11.9px;
}
//弹窗
/deep/ .vs-popup {
  width: 400px;
}
</style>
